<template>
  <div style="display:flex;">
    <van-icon class="fs-25" name="vip-card-o" />
    <div style="height:40px;width:100vw;;">
      <van-coupon-cell :coupons="coupons" :chosen-coupon="chosenCoupon" @click="showList = true" />
      <van-popup v-model="showList" position="bottom">
        <van-coupon-list
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          :disabled-coupons="disabledCoupons"
          @change="onChange"
          @exchange="onExchange"
          style="padding-bottom:30px;"
        />
      </van-popup>
      <button @click="send"></button>
    </div>
  </div>
</template>
<script>
const coupon = {};
export default {
  props: ["money"],
  data() {
    return {
      showList: false,
      chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon],
      list: []
    };
  },
  methods: {
    send(data) {
      this.$emit("data", data);
    },
    onChange(index) {
      // console.log(index);
      if (this.$store.state.addresstel) {
        this.chosenCoupon = index;
        if (index == -1) {
          this.send({});
        } else {
          if (this.coupons[index].type == "02") {
            this.coupons[index].value = this.money * 0.12 * 100;
            let data = this.coupons[index];
            this.send(data);
          } else {
            let data = this.coupons[index];
            this.send(data);
          }
        }
        this.showList = false;
      } else {
        this.$toast.fail('未填写收件人信息');
        setTimeout(() => {
          this.showList = false;
        }, 1000);
        
      }
    },
    onExchange(code) {
      this.coupons.push(coupon);
    },
    getList() {
      let url = "/coupon/all";
      this.$axios
        .get(url)
        .then(res => {
          this.list = res.list;
          this.getMoney();
        })
        .catch(err => {
          console.log("err", err);
        });
    },
    getMoney() {
      let arr = this.list.filter(item => {
        return item.conditionValue / 100 <= this.money;
      });
      this.coupons = arr || {};
      let arr2 = this.list.filter(item => {
        return item.conditionValue / 100 > this.money;
      });
      this.disabledCoupons = arr2 || {};
    }
  },
  watch: {
    money() {
      this.getMoney();
    }
  },

  created() {
    this.getList();
  }
};
</script>
<style lang="less" >
.van-coupon-cell {
  padding: 0;
}
.van-cell__right-icon {
  min-width: 1em;
  height: 24px;
  font-size: 16px;
  line-height: 50px;
}
</style>
<style lang="less" scoped>
.van-coupon-cell {
  height: 50px;
  line-height: 50px;
}
.fs-25 {
  color: #be3335;
  font-size: 23px;
  margin-right: 10px;
  height: 50px;
  line-height: 40px;
  position: relative;
  top: 6px;
}
</style>